<template>
    <!--    全屏容器    -->
    <div ref="pageDiv" @mousemove="demo_move" @mouseup="demo_up" 
           :class="{'zlevelTop':mouseDownState}"
           style="position: absolute;top: 0;height: 100%;width: 100%">
        <!--  点击蒙版  -->
        <div v-if="menuOpen"  @click.stop="closeOpenModal" 
        style="position: fixed;top: 0;left: 0;width: 100%;height: 100%;z-index: 998"></div>
        <!--  多功能菜单 -->
        <div :class="{'six-more-modal-btn':menuOpen,'moreModal':!menuOpen,'more-tran-animate':!mouseDownState}"
             ref="actionMgr" :style="position"  @mousedown="demo_down">
            <!--  触发器 -->
            <div v-if="!menuOpen"  class="imgMore">
               <Icon  style="cursor:pointer;font-size:1.2rem"  type="md-cog" @click="demo_click" />
            </div>
            <!--  菜单  -->
            <div v-else></div>
        </div>
    </div>
</template>

<script>
export default {
  name: "homeDragbtn",
  props: {
    // 通过position来设置初始定位
    position: {
      type: Object,
      default: function() {
        return {
          bottom: "3rem",
          right: "1rem"
        };
      }
    }
  },
  data() {
    return {
      menuOpen: false, //  菜单展开状态
      mouseDownState: false, //  鼠标点击状态
      iX: 0,
      iY: 0,
      dX: 0,
      dY: 500, //  初始定位
      lastMoveIndex: 0, //  拖拽计数
      curMoveIndex: 0 //  历史计数
    };
  },
  methods: {
    //  鼠标按下
    demo_down(event) {
      //  如果打开了菜单，则不做响应
      if (this.menuOpen) {
        this.mouseDownState = false;
        return;
      }
      /* 此处判断  pc 或 移动端 得到 event 事件 */
      let touch;
      if (event.touches) {
        touch = event.touches[0];
      } else {
        touch = event;
      }
      // 鼠标点击 面向页面 的 x坐标 y坐标
      let { clientX, clientY } = touch;
      // 鼠标x坐标 - 拖拽按钮x坐标  得到鼠标 距离 拖拽按钮 的间距
      this.iX = clientX - this.$refs.actionMgr.offsetLeft;
      // 鼠标y坐标 - 拖拽按钮y坐标  得到鼠标 距离 拖拽按钮 的间距
      this.iY = clientY - this.$refs.actionMgr.offsetTop;
      // 设置当前 状态为 鼠标按下
      this.mouseDownState = true;
    },
    //  鼠标拖拽
    demo_move(event) {
      // 鼠标按下 切移动中
      if (this.mouseDownState) {
        /* 此处判断  pc 或 移动端 得到 event 事件 */
        let touch;
        if (event.touches) {
          touch = event.touches[0];
        } else {
          touch = event;
        }
        // 鼠标移动时 面向页面 的 x坐标 y坐标
        let { clientX, clientY } = touch;
        // 当前页面全局容器 dom 元素  获取容器 宽高
        let {
          clientHeight: pageDivY,
          clientWidth: pageDivX
        } = this.$refs.pageDiv;
        /* 鼠标坐标 - 鼠标与拖拽按钮的 间距坐标  得到 拖拽按钮的 左上角 x轴y轴坐标 */
        let [x, y] = [clientX - this.iX, clientY - this.iY];

        // 拖拽按钮 dom 元素  获取 宽高 style 对象
        let {
          clientHeight: actionMgrY,
          clientWidth: actionMgrX,
          style: actionMgrStyle
        } = this.$refs.actionMgr;
        /* 此处判断 拖拽按钮 如果超出 屏幕宽高 或者 小于
                 设置 屏幕最大 x=全局容器x y=全局容器y 否则 设置 为 x=0 y=0
              */
        if (x > pageDivX - actionMgrX) x = pageDivX - actionMgrX;
        else if (x < 0) x = 0;
        if (y > pageDivY - actionMgrY) y = pageDivY - actionMgrY;
        else if (y < 0) y = 0;
        this.dX = x;
        this.dY = y;
        // 计算后坐标  设置 按钮位置
        actionMgrStyle.left = `${x}px`;
        actionMgrStyle.top = `${y}px`;
        actionMgrStyle.bottom = "auto";
        actionMgrStyle.right = "auto";
        //  move Index
        this.lastMoveIndex++;
        //  当按下键滑动时， 阻止屏幕滑动事件
        event.preventDefault();
      }
    },
    //    鼠标抬起
    demo_up() {
      // //  当前页面全局容器 dom 元素  获取容器 宽高
      // let {
      //   clientHeight: windowHeight,
      //   clientWidth: windowWidth
      // } = document.documentElement;
      // //  拖拽按钮 dom 元素  获取 宽高 style 对象
      // let {
      //   clientHeight: actionMgrY,
      //   clientWidth: actionMgrX,
      //   style: actionMgrStyle
      // } = this.$refs.actionMgr;

      this.mouseDownState = false;
    },
    //    单击事件
    demo_click() {
      this.curMoveIndex = this.lastMoveIndex;
      this.$emit("show-modal");
    },
    //    点击空白关闭菜单
    closeOpenModal() {}
  }
};
</script>

<style lang="less" scoped>
.zlevelTop {
  z-index: 9999;
}
.more-tran-animate {
  transition: 0.5s;
}
.moreModal {
  /* 如果碰到滑动问题，1.3 请检查 z-index。z-index需比web大一级*/
  z-index: 9999;
  position: fixed;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background-color: #337ab7;
  line-height: 40px;
  text-align: center;
  color: #fff;
  opacity: 0.6;
}
.moreModal:hover {
  opacity: 1;
}
.six-more-modal-btn {
  position: fixed;
  z-index: 9999;
  width: 14rem;
  height: 14rem;
  border-radius: 5px;
  background: #1a1a1a;
  color: #fff;
}
.imgMore {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}
</style>
